UI

The application is using React as the main UI framework. It follows a separation into three subgroups:

• Components: Building blocks of the app. Should be decoupled from most services and reusable (with minor or no modifications) in other projects
• Containers: They contain more bussiness logic related to the app
• Views: Can think of them as the root components of the routes, e.g. pages or modals.

** Some services can not be called from the container. i.e.: getTranslation

To be able to configure the presentation from your CMS, there are several mappings defined to choose different available components. These are defined in src/config/templates.js.

If you want to create a new component, ideally it will follow these principles:

• Decoupled from third party services: That way it increases its reusability
• Including Storybook stories: This allows for more efficient debugging for UI issues, which can get complex when doing directly in the app
• Including unit tests: Components are usually relatively simple to test which can bring more confidence when changing

If you use Accedo One as the CMS, you can map the new component to a template value.

Performance Considerations

Performance is sometimes a limiting factor, especially in TV applications, where special attention has to be paid when using React. Here we list some of the most important ones:

• Use the production build (this comes configured by default in VDK)
• Avoid unnecessary divs (or any other DOM elements)
  • Sometimes they are created only to hold classNames, but in many cases these can be moved to the children
  • Other times they are just used as a quick way to group elements, uss React.Fragment instead
• Check the build/report.html file to see the bundle composition and try reducing the dependencies included
  • This is generated by webpack/build/prod-common-config.js by using https://github.com/webpack-contrib/webpack-bundle-analyzer
  • It needs to receive the environment variable WEBPACK_ANALYZE_BUNDLE=true when building
• Avoid unnecessary re-renders
  • This can have a big performance impact
  • Use React.PureComponent, React.memo or shouldComponentUpdate appropiately
  • Use this package to track re-renders
    • This is already integrated, just need to uncomment the usage in src/client/client.js
  • Try passing flat props instead of objects. When passing objects, try to maintain the reference
• Use throttle, debounce and memoize when necessary
• Use DevTools helpers to detect the slowest segments of execution
• Use some helpful Chrome extensions, although it is better to disable them when profiling. For example:
  • React: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
• Some useful articles and videos:
  • https://reactjs.org/docs/optimizing-performance.html
  • https://www.keycdn.com/blog/react-performance
  • https://medium.com/myheritage-engineering/how-to-greatly-improve-your-react-app-performance-e70f7cbbb5f6
  • https://kentcdodds.com/blog/profile-a-react-app-for-performance/
  • https://www.infoq.com/articles/reduce-react-load-time/
  • https://www.youtube.com/watch?v=Hr2vrhrNaRo